@import "@material/typography/mdc-typography";
@import "@material/image-list/mdc-image-list";
@import "@material/image-list/mixins";
@import "@material/ripple/mdc-ripple";
@import "@material/theme/color-palette";
@import "@material/list/mdc-list";

$breakpoints: (
  mobile:  320px,
  tablet:  599px,
);

$component-list-gutter-size: 8px;

body {
  margin: 0;
}

#catalog-image-list {
  @include mdc-image-list-aspect(1); // Images are square
  @include mdc-image-list-standard-columns(4, $component-list-gutter-size);

  max-width: 900px;
  padding-top: 128px;
  padding-bottom: 100px;
}

@media (max-width: map-get($breakpoints, tablet)) {
  #catalog-image-list {
    @include mdc-image-list-standard-columns(3, $component-list-gutter-size);
  }
}

@media (max-width: map-get($breakpoints, mobile)) {
  #catalog-image-list {
    @include mdc-image-list-standard-columns(2, $component-list-gutter-size);
  }
}
.catalog-image-list-item-container {
  background-color: $material-color-grey-100;
}

.catalog-image-list-label {
  font-weight: 500;
  color: $material-color-grey-900;
}

a.catalog-image-link {
  text-decoration: none;
}
